{% load staticfiles humanize %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>เจ๊นิดผลไม้ | JNid Shop</title>

    <link href="{% static 'ipad/css/reset.min.css' %}" rel="stylesheet">
    <link href="{% static 'ipad/css/print.css' %}" rel="stylesheet">
  </head>
  <body>
    <div class="main-wrapper container">
      <div class="order-form-controls">
        <div class="customer">{{ order.person }}</div>
        <div class="created">{{ order.created|date:'d/m/y H:i' }}</div>
      </div>

    {% for page in item_pages %}
      <table class="order-form table table-bordered" {% if forloop.counter > 1 %}style="page-break-before:always;"{% endif %}>
        <thead>
          {% if forloop.counter > 1 %}<tr style="height:0.65in;"><td colspan="5">&nbsp;</td></tr>{% endif %}
          <tr>
            <th class="quantity">จำนวน</th>
            <th class="name">รายการ</th>
            <th class="unit">หน่วย</th>
            <th class="price">ราคา</th>
            <th class="total">รวม</th>
          </tr>
        </thead>
        
        <tbody>
        {% for item in page %}
          <tr {% if item.is_deleted %}class="deleted"{% endif %}>
            <td>{{ item.quantity }}</td>
            <td class="name">
            {% if item.product.name %}
              {{ item.product.name }}
            {% else %}
              {{ item.basket.name }}
            {% endif %}
            </td>
            <td>{{ item.unit|floatformat|intcomma }}</td>
            <td>{{ item.price_per_unit|floatformat|intcomma }}</td>
            <td class="total">{{ item.total|floatformat|intcomma }}</td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    {% endfor %}
    </div>

    <div class="notation">{{ order.notation|linebreaksbr }}</div>

    <div class="order-form-footer">
      <div class="total-quantity">จำนวนรวม {{ order.quantity }} ชิ้น</div>
      <div class="summary">{{ order.total|floatformat|intcomma }}</div>
    </div>

    <!-- <div style="border-top:1px solid #ccc; position:absolute; top:0; width:100%;">&nbsp;</div>
    <div style="border-top:1px solid #ccc; position:absolute; top:1in; width:100%;">&nbsp;</div>
    <div style="border-top:1px solid #ccc; position:absolute; top:2in; width:100%;">&nbsp;</div>
    <div style="border-top:1px solid #ccc; position:absolute; top:3in; width:100%;">&nbsp;</div>
    <div style="border-top:1px solid #ccc; position:absolute; top:4in; width:100%;">&nbsp;</div>
    <div style="border-top:1px solid #ccc; position:absolute; top:5in; width:100%;">&nbsp;</div>
    <div style="border-top:1px solid #ccc; position:absolute; top:6in; width:100%;">&nbsp;</div>
    <div style="border-top:1px solid #ccc; position:absolute; top:7in; width:100%;">&nbsp;</div>
    <div style="border-top:1px solid #ccc; position:absolute; top:8in; width:100%;">&nbsp;</div> -->
  </body>
</html>